/**
 * 鑱婂ぉ宸ュ叿
 * 渚濊禆铻嶄簯
 * rcWebToolket
 * [description]
 * @param  {[type]} doc [description]
 * @param  {[type]} win [description]
 * @return {[type]}     [description]
 */
"use struct";
(function(doc, win, $) {
  /**
   * [Render description]
   */
  function Render() {}

  /**
   * 绠€鏄撶殑缂栬瘧鍑芥暟
   * @param  {[type]} tpl  [妯℃澘]
   * @param  {[type]} data [鏁版嵁]
   * 鐩墠鍙敮鎸佷竴灞傛暟鎹�
   * @return {[type]}      [description]
   */
  Render.prototype.compile = function(tpl, data) {
    var express,
      html = [],
      values = [],
      rex = /(\{\{[a-zA-Z0-9]{1,}\}\})/g,
      regstr = /[a-zA-Z0-9]{1,}/;

    if (!!tpl && !!data) {
      express = tpl.match(rex);
      $.each(express, function(i, v) {
        var key = v.match(regstr);
        values.push(data[key]);
        if (i < express.length - 1) {
          html.push(tpl.split(v)[0]);
          tpl = tpl.split(v)[1];
        } else {
          html = html.concat(tpl.split(v));
        }
      });
    }

    //璧嬪€�
    $.each(html, function(i, h) {
      if (i < html.length - 1) {
        html[i] = html[i] + (values[i] || "");
      }
    });
    return html.join("");
  };

  function extend(subclass, superclass) {
    function f() {}
    f.prototype = new superclass();
    subclass.prototype = new f();
    subclass.prototype.constructor = subclass;
    subclass.superclass = superclass.prototype;
  }

  /**
   * 鏁翠綋妯℃澘
   * @type {String}
   */
  var CT =
    '<div id="chat-pig" style="width: 320px; height: 480px; position: fixed; bottom: -500px; border-radius: 5px 5px 0px 0px; overflow: hidden; z-index: 2147483583; box-shadow: rgba(0, 0, 0, 0.0980392) 0px 0px 5px 2px; right: 50px; transition:  all 0.3s ease-in-out 0.1s">\
    <div class="chat-container">\
    <div class="chat-header">\
    <div class="chat-tool">\
    <a hidefocus="" href="javascript: void(0);" class="chat-voice" title="寮€/鍏� 澹伴煶"></a>\
    <a hidefocus="" href="javascript: void(0);" class="chat-min" title="鏈€灏忓寲"></a>\
    <a hidefocus="" href="javascript: void(0);" class="chat-close" title="缁撴潫瀵硅瘽"></a>\
    </div>\
    <div class="chat-info">\
    <img src="{{userAsset}}" alt="">\
    <div class="chat-info-title">\
    <p class="chat-info-title-text">\
    <span class="infoBarName" id="infoBarName"><span class="chat-rebot">{{userName}}</span></span>\
    </p>\
    <p class="chat-chef">{{copyRight}}</p>\
    </div>\
    </div>\
    </div>\
    <div class="chat-content">\
    <ul class="chat-list">\
    \
    </ul>\
    </div>\
    <div class="chat-footer">\
    <div id="loading-bar">\
    涓婁紶鍥剧墖<span>0</span>%\
    </div>\
    <div class="chat-face">\
    <a href="#" class="emit-face"></a>\
    <a href="javascript:;" class="emit-img"></a>\
    </div>\
    <div class="chat-text-input">\
    <textarea name="" id="" cols="50" rows="5" placeholder="请输入"></textarea>\
    </div>\
    <div class="chat-btn-tool">\
    <form id="imgForm"><input id="uploadImg" style="position:absolute;top:-9999px;left:-9999px;" type="file" accept="image/jpeg,image/jpg,image/png" value="涓婁紶鍥剧墖"/></form>\
    <button class="send-btn">发送</button>\
    </div>\
    </div>\
    </div>\
    </div>';

  // var TRI = '<div  style="position: fixed; z-index: 2147483583; box-sizing: content-box; height: 43px; bottom: -43px; padding: 0px 20px; border-radius: 4px 4px 0px 0px; right: 100px; transition: all 0.3s ease-in-out 0.1s; background: rgb(89, 98, 115);">\
  // <a hidefocus="" id="zhichiBtn" href="javascript: void(0);" style="text-decoration: none; outline: none; font-family: Microsoft Yahei, Arial, Helvetica; color: #fff; font-size: 16px; display: inline-block; margin: 0; padding: 0; border: none; line-height:43px; float:none;">\
  //     <img style="vertical-align: middle; width: 31px; border:none; margin: -4px 10px 0 0; float: none; position: static; height: 27px;" src="https://img1.ultimavip.cn//zhichichatBtnBg.png"><span style="font-family: Microsoft Yahei, Arial, Helvetica; color: #fff; font-size:16px; margin: 0; padding: 0; ">鍜ㄨ绠″</span>\
  // </a><span id="zhichiCount" style="height: 30px; width: 30px; line-height: 30px; border: 1px solid #FFFFFF; border-radius: 50%; background-color: red; color: #FFFFFF; text-align: center; display: none; position: absolute; right: -15px; top: -15px;"></span>\
  // </div>';
  var CSS =
    '.chat-container{position:relative;overflow:hidden}.chat-container *{box-sizing:border-box}.chat-container .chat-header{height:60px;background:#596273}.chat-container .chat-header .chat-info{padding:10px 0;margin-left:12px}.chat-container .chat-header .chat-info img{width:42px;height:42px;border-radius:50%;float:left;vertical-align:middle}.chat-container .chat-header .chat-info .chat-info-title{margin-left:55px;color:#fff}.chat-container .chat-header .chat-info .chat-info-title .chat-info-title-text{height:20px;padding:0;margin:0}.chat-container .chat-header .chat-info .chat-info-title .chat-info-title-text .chat-rebot{position:relative;display:inline-block;vertical-align:middle;line-height:24px;z-index:1;height:20px;width:120px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.chat-container .chat-header .chat-info .chat-info-title .chat-chef{padding:0;margin:0;font-size:12px;height:20px;line-height:20px}.chat-container .chat-header .chat-tool{position:absolute;width:80px;right:5px;top:10px;text-align:right}.chat-container .chat-header .chat-tool a{width:11px;height:11px;background-image:url(https://img1.ultimavip.cn//chat.png);display:inline-block;vertical-align:middle;background-repeat:no-repeat;margin-right:5px}.chat-container .chat-header .chat-tool a.chat-voice{background-position:0 -30px}.chat-container .chat-header .chat-tool a.chat-min{background-position:-70px -30px}.chat-container .chat-header .chat-tool a.chat-max{background-position:-85px -30px}.chat-container .chat-header .chat-tool a.chat-close{background-position:-30px -29px}.chat-container .chat-content{height:300px;overflow-x:hidden;overflow-y:scroll;width:auto;margin-right:-20px;color:#333;position:relative;background:#fff}.chat-container .chat-content .chat-list{list-style:none;margin:0;overflow-y:hidden;padding:0 20px 10px;font-size:12px;min-width:306px;max-width:323px;background:#fff;min-width:303px}.chat-container .chat-content .chat-list li:after{display:table;line-height:0;content:"";clear:both}.chat-container .chat-content .chat-list .message-label{text-align:center;font-size:12px;margin:10px 0;color:#b1b6b4}.chat-container .chat-content .chat-list .message-label a{text-decoration:none;color:inherit}.chat-container .chat-content .chat-list .system-message{text-align:center;line-height:26px;margin:2px 0}.chat-container .chat-content .chat-list .system-message span{display:inline-block;padding:0 10px;border-radius:10px;background-color:#f5f5f5;color:#b1b5b5}.chat-container .chat-content .chat-list .message-box{margin:20px 0;position:relative}.chat-container .chat-content .chat-list .message-box.box-right{text-align:right}.chat-container .chat-content .chat-list .message-box.box-right .message-con{color:#f0f0f0;position:relative;text-align:left;background:#596273}.chat-container .chat-content .chat-list .message-box.box-right .message-con:before{right:-12px;border-color:transparent #596273;border-width:0 0 12px 12px}.chat-container .chat-content .chat-list .message-box.box-left .message-con:before{left:-12px;border-color:transparent #f0f0f0;border-width:0 12px 12px 0}.chat-container .chat-content .chat-list .message-box .message-con{padding:10px;background-color:#f0f0f0;border-radius:2px;display:inline-block;position:relative;max-width:90%;min-height:20px}.chat-container .chat-content .chat-list .message-box .message-con:before{width:0;position:absolute;top:12px;border-style:solid;content:""}.chat-container .chat-content .chat-list .message-box .message-con .message-text{width:100%;font-size:14px;line-height:20px;padding:0;margin:0;word-wrap:break-word;display:inline-block}.message-text img{max-width:200px;}.chat-container .chat-content .chat-list .message-box .left-name{font-size:14px;color:#858282;margin-bottom:10px}#loading-bar{display:none;position: absolute;top: -20px;height: 20px;width: 100%;left: 0;font-size: 12px;line-height: 20px;color: #c1bebe;text-align: center;}.chat-container .chat-footer{position: relative;background:#fff;height:120px;border-top:1px solid #d9d9d9}.chat-container .chat-footer .chat-face{height:22px;margin-left:10px;position:relative}.chat-container .chat-footer .chat-face a{display:inline-block;color:#fff;margin:4px 6px;width:18px;height:18px;background-position:-46px -1px;vertical-align: top;}.chat-face .emit-face{background-image:url(https://img1.ultimavip.cn//chat.png);}.chat-container .chat-footer .chat-face .emit-img{background-image:url(https://img2.ultimavip.cn/web/pc-image.png);background-size: 100% 100%;background-repeat: no-repeat;background-position: 0 0;height: 16px;margin-top: 4px;}.chat-container .chat-footer .chat-face .face-box{position:absolute;top:-235px;left:0;background:#fff;padding:2px;border:1px solid #dfe6f6;display:none}.chat-container .chat-footer .chat-face .face-box td{padding:0}.chat-container .chat-footer .chat-face .face-box td img{cursor:pointer}.chat-container .chat-footer .chat-text-input{margin:0 10px}.chat-container .chat-footer .chat-text-input textarea{outline:none;width:100%;height:50px;margin:5px 0 0;padding:0;border:0;color:#999;resize:none;font-size:14px}.chat-container .chat-footer .chat-btn-tool{text-align:right;padding-right:10px}.chat-container .chat-footer .chat-btn-tool .send-btn{right:10px;bottom:0;margin:0;padding:0;cursor:pointer;border:none;width:60px;height:24px;border-radius:2px;font-size:12px;background:#596273;color:#fff;outline:none}.chat-container .chat-footer .chat-btn-tool .send-btn:hover{background:#596473}.chat-mark{z-index:2;background:rgba(0,0,0,.6)}.chat-mark,.zcDialog{position:absolute;top:0;left:0;right:0;bottom:0}.zcDialog{z-index:3;text-align:center}.zcDialog .chat-modal{width:90%;background-color:#fff;border-radius:2px;display:inline-block;vertical-align:middle;overflow:hidden}.zcDialog .chat-modal .zcDialog-body{width:100%;font-size:16px;padding:20px 0;position:relative}.zcDialog .chat-modal .zcDialog-body p{text-align:center;font-size:18px;margin:20px 0;line-height:30px}.zcDialog .chat-modal .zcDialog-body .iscloseDiv a{display:inline-block;width:88px;height:30px;line-height:30px;background-color:#fff;border-radius:3px;border:1px solid #d6d6d6;color:#5f5e5e;font-size:14px;text-decoration:none;margin-right:20px}.zcDialog .chat-modal .zcDialog-body .iscloseDiv .surEndBtn{background:#596273;color:#fff}.zcDialog .zcDialog-vertical{height:100%;width:1px;color:transparent;border:none;box-sizing:border-box;display:inline-block;vertical-align:middle}.qq_face{overflow:hidden;width:435px;margin-right:-1px}.emoji{display:inline-block;width:29px;height:29px;cursor:pointer}.emoji_11001{background:url(http://img2.ultimavip.cn/emoji_11001.png) no-repeat 50%;background-size:contain}.emoji_11002{background:url(http://img2.ultimavip.cn/emoji_11002.png) no-repeat 50%;background-size:contain}.emoji_11003{background:url(http://img2.ultimavip.cn/emoji_11003.png) no-repeat 50%;background-size:contain}.emoji_11004{background:url(http://img2.ultimavip.cn/emoji_11004.png) no-repeat 50%;background-size:contain}.emoji_11005{background:url(http://img2.ultimavip.cn/emoji_11005.png) no-repeat 50%;background-size:contain}.emoji_11006{background:url(http://img2.ultimavip.cn/emoji_11006.png) no-repeat 50%;background-size:contain}.emoji_11007{background:url(http://img2.ultimavip.cn/emoji_11007.png) no-repeat 50%;background-size:contain}.emoji_11008{background:url(http://img2.ultimavip.cn/emoji_11008.png) no-repeat 50%;background-size:contain}.emoji_11009{background:url(http://img2.ultimavip.cn/emoji_11009.png) no-repeat 50%;background-size:contain}.emoji_11010{background:url(http://img2.ultimavip.cn/emoji_11010.png) no-repeat 50%;background-size:contain}.emoji_11011{background:url(http://img2.ultimavip.cn/emoji_11011.png) no-repeat 50%;background-size:contain}.emoji_11012{background:url(http://img2.ultimavip.cn/emoji_11012.png) no-repeat 50%;background-size:contain}.emoji_11013{background:url(http://img2.ultimavip.cn/emoji_11013.png) no-repeat 50%;background-size:contain}.emoji_11014{background:url(http://img2.ultimavip.cn/emoji_11014.png) no-repeat 50%;background-size:contain}.emoji_11015{background:url(http://img2.ultimavip.cn/emoji_11015.png) no-repeat 50%;background-size:contain}.emoji_11016{background:url(http://img2.ultimavip.cn/emoji_11016.png) no-repeat 50%;background-size:contain}.emoji_11017{background:url(http://img2.ultimavip.cn/emoji_11017.png) no-repeat 50%;background-size:contain}.emoji_11018{background:url(http://img2.ultimavip.cn/emoji_11018.png) no-repeat 50%;background-size:contain}.emoji_11019{background:url(http://img2.ultimavip.cn/emoji_11019.png) no-repeat 50%;background-size:contain}.emoji_11020{background:url(http://img2.ultimavip.cn/emoji_11020.png) no-repeat 50%;background-size:contain}.emoji_11021{background:url(http://img2.ultimavip.cn/emoji_11021.png) no-repeat 50%;' +
    "background-size:contain}.emoji_11022{background:url(http://img2.ultimavip.cn/emoji_11022.png) no-repeat 50%;background-size:contain}.emoji_11023{background:url(http://img2.ultimavip.cn/emoji_11023.png) no-repeat 50%;background-size:contain}.emoji_11024{background:url(http://img2.ultimavip.cn/emoji_11024.png) no-repeat 50%;background-size:contain}.emoji_11025{background:url(http://img2.ultimavip.cn/emoji_11025.png) no-repeat 50%;background-size:contain}.emoji_11026{background:url(http://img2.ultimavip.cn/emoji_11026.png) no-repeat 50%;background-size:contain}.emoji_11027{background:url(http://img2.ultimavip.cn/emoji_11027.png) no-repeat 50%;background-size:contain}.emoji_11028{background:url(http://img2.ultimavip.cn/emoji_11028.png) no-repeat 50%;background-size:contain}.emoji_11029{background:url(http://img2.ultimavip.cn/emoji_11029.png) no-repeat 50%;background-size:contain}.emoji_11030{background:url(http://img2.ultimavip.cn/emoji_11030.png) no-repeat 50%;background-size:contain}.emoji_11031{background:url(http://img2.ultimavip.cn/emoji_11031.png) no-repeat 50%;background-size:contain}.emoji_11032{background:url(http://img2.ultimavip.cn/emoji_11032.png) no-repeat 50%;background-size:contain}.emoji_11033{background:url(http://img2.ultimavip.cn/emoji_11033.png) no-repeat 50%;background-size:contain}.emoji_11034{background:url(http://img2.ultimavip.cn/emoji_11034.png) no-repeat 50%;background-size:contain}.emoji_11035{background:url(http://img2.ultimavip.cn/emoji_11035.png) no-repeat 50%;background-size:contain}.emoji_11036{background:url(http://img2.ultimavip.cn/emoji_11036.png) no-repeat 50%;background-size:contain}.emoji_11037{background:url(http://img2.ultimavip.cn/emoji_11037.png) no-repeat 50%;background-size:contain}.emoji_11038{background:url(http://img2.ultimavip.cn/emoji_11038.png) no-repeat 50%;background-size:contain}.emoji_11039{background:url(http://img2.ultimavip.cn/emoji_11039.png) no-repeat 50%;background-size:contain}.emoji_11040{background:url(http://img2.ultimavip.cn/emoji_11040.png) no-repeat 50%;background-size:contain}.emoji_11041{background:url(http://img2.ultimavip.cn/emoji_11041.png) no-repeat 50%;background-size:contain}.emoji_11042{background:url(http://img2.ultimavip.cn/emoji_11042.png) no-repeat 50%;background-size:contain}.emoji_11043{background:url(http://img2.ultimavip.cn/emoji_11043.png) no-repeat 50%;background-size:contain}.emoji_11044{background:url(http://img2.ultimavip.cn/emoji_11044.png) no-repeat 50%;background-size:contain}.emoji_11045{background:url(http://img2.ultimavip.cn/emoji_11045.png) no-repeat 50%;background-size:contain}.emoji_11046{background:url(http://img2.ultimavip.cn/emoji_11046.png) no-repeat 50%;background-size:contain}.emoji_11047{background:url(http://img2.ultimavip.cn/emoji_11047.png) no-repeat 50%;background-size:contain}.emoji_11048{background:url(http://img2.ultimavip.cn/emoji_11048.png) no-repeat 50%;background-size:contain}.emoji_11049{background:url(http://img2.ultimavip.cn/emoji_11049.png) no-repeat 50%;background-size:contain}.emoji_11050{background:url(http://img2.ultimavip.cn/emoji_11050.png) no-repeat 50%;background-size:contain}.emoji_11051{background:url(http://img2.ultimavip.cn/emoji_11051.png) no-repeat 50%;background-size:contain}.emoji_11052{background:url(http://img2.ultimavip.cn/emoji_11052.png) no-repeat 50%;background-size:contain}.emoji_11053{background:url(http://img2.ultimavip.cn/emoji_11053.png) no-repeat 50%;background-size:contain}.emoji_11054{background:url(http://img2.ultimavip.cn/emoji_11054.png) no-repeat 50%;background-size:contain}.emoji_11055{background:url(http://img2.ultimavip.cn/emoji_11055.png) no-repeat 50%;background-size:contain}.emoji_11056{background:url(http://img2.ultimavip.cn/emoji_11056.png) no-repeat 50%;background-size:contain}.emoji_11057{background:url(http://img2.ultimavip.cn/emoji_11057.png) no-repeat 50%;background-size:contain}.emoji_11058{background:url(http://img2.ultimavip.cn/emoji_11058.png) no-repeat 50%;background-size:contain}.emoji_11059{background:url(http://img2.ultimavip.cn/emoji_11059.png) no-repeat 50%;background-size:contain}.emoji_11060{background:url(http://img2.ultimavip.cn/emoji_11060.png) no-repeat 50%;background-size:contain}.emoji_11061{background:url(http://img2.ultimavip.cn/emoji_11061.png) no-repeat 50%;background-size:contain}.emoji_11062{background:url(http://img2.ultimavip.cn/emoji_11062.png) no-repeat 50%;background-size:contain}.emoji_11063{background:url(http://img2.ultimavip.cn/emoji_11063.png) no-repeat 50%;background-size:contain}.emoji_11064{background:url(http://img2.ultimavip.cn/emoji_11064.png) no-repeat 50%;background-size:contain}.emoji_11065{background:url(http://img2.ultimavip.cn/emoji_11065.png) no-repeat 50%;background-size:contain}.emoji_11066{background:url(http://img2.ultimavip.cn/emoji_11066.png) no-repeat 50%;background-size:contain}.emoji_11067{background:url(http://img2.ultimavip.cn/emoji_11067.png) no-repeat 50%;background-size:contain}.emoji_11068{background:url(http://img2.ultimavip.cn/emoji_11068.png) no-repeat 50%;background-size:contain}.emoji_11069{background:url(http://img2.ultimavip.cn/emoji_11069.png) no-repeat 50%;background-size:contain}.emoji_11070{background:url(http://img2.ultimavip.cn/emoji_11070.png) no-repeat 50%;background-size:contain}.emoji_11071{background:url(http://img2.ultimavip.cn/emoji_11071.png) no-repeat 50%;background-size:contain}.emoji_11072{background:url(http://img2.ultimavip.cn/emoji_11072.png) no-repeat 50%;background-size:contain}.emoji_11073{background:url(http://img2.ultimavip.cn/emoji_11073.png) no-repeat 50%;background-size:contain}.emoji_11074{background:url(http://img2.ultimavip.cn/emoji_11074.png) no-repeat 50%;background-size:contain}.emoji_11075{background:url(http://img2.ultimavip.cn/emoji_11075.png) no-repeat 50%;background-size:contain}.emoji_11076{background:url(http://img2.ultimavip.cn/emoji_11076.png) no-repeat 50%;background-size:contain}.emoji_11077{background:url(http://img2.ultimavip.cn/emoji_11077.png) no-repeat 50%;background-size:contain}.emoji_11078{background:url(http://img2.ultimavip.cn/emoji_11078.png) no-repeat 50%;background-size:contain}.emoji_11079{background:url(http://img2.ultimavip.cn/emoji_11079.png) no-repeat 50%;background-size:contain}.emoji_11080{background:url(http://img2.ultimavip.cn/emoji_11080.png) no-repeat 50%;background-size:contain}.emoji_11081{background:url(http://img2.ultimavip.cn/emoji_11081.png) no-repeat 50%;background-size:contain}.emoji_11082{background:url(http://img2.ultimavip.cn/emoji_11082.png) no-repeat 50%;background-size:contain}.emoji_11083{background:url(http://img2.ultimavip.cn/emoji_11083.png) no-repeat 50%;background-size:contain}.emoji_11084{background:url(http://img2.ultimavip.cn/emoji_11084.png) no-repeat 50%;background-size:contain}.emoji_11085{background:url(http://img2.ultimavip.cn/emoji_11085.png) no-repeat 50%;background-size:contain}.emoji_11086{background:url(http://img2.ultimavip.cn/emoji_11086.png) no-repeat 50%;background-size:contain}.emoji_11087{background:url(http://img2.ultimavip.cn/emoji_11087.png) no-repeat 50%;background-size:contain}.emoji_11088{background:url(http://img2.ultimavip.cn/emoji_11088.png) no-repeat 50%;background-size:contain}.emoji_11089{background:url(http://img2.ultimavip.cn/emoji_11089.png) no-repeat 50%;background-size:contain}.emoji_11090{background:url(http://img2.ultimavip.cn/emoji_11090.png) no-repeat 50%;background-size:contain}.emoji_11091{background:url(http://img2.ultimavip.cn/emoji_11091.png) no-repeat 50%;background-size:contain}.emoji_11092{background:url(http://img2.ultimavip.cn/emoji_11092.png) no-repeat 50%;background-size:contain}.emoji_11093{background:url(http://img2.ultimavip.cn/emoji_11093.png) no-repeat 50%;background-size:contain}.emoji_11094{background:url(http://img2.ultimavip.cn/emoji_11094.png) no-repeat 50%;background-size:contain}.emoji_11095{background:url(http://img2.ultimavip.cn/emoji_11095.png) no-repeat 50%;background-size:contain}.emoji_11096{background:url(http://img2.ultimavip.cn/emoji_11096.png) no-repeat 50%;background-size:contain}.emoji_11097{background:url(http://img2.ultimavip.cn/emoji_11097.png) no-repeat 50%;background-size:contain}.emoji_11098{background:url(http://img2.ultimavip.cn/emoji_11098.png) no-repeat 50%;background-size:contain}.emoji_11099{background:url(http://img2.ultimavip.cn/emoji_11099.png) no-repeat 50%;background-size:contain}.emoji_11100{background:url(http://img2.ultimavip.cn/emoji_11100.png) no-repeat 50%;background-size:contain}.emoji_11101{background:url(http://img2.ultimavip.cn/emoji_11101.png) no-repeat 50%;background-size:contain}.emoji_11102{background:url(http://img2.ultimavip.cn/emoji_11102.png) no-repeat 50%;background-size:contain}.emoji_11103{background:url(http://img2.ultimavip.cn/emoji_11103.png) no-repeat 50%;background-size:contain}.emoji_11104{background:url(http://img2.ultimavip.cn/emoji_11104.png) no-repeat 50%;background-size:contain}";
  var FACE =
    '<span class="emoji emoji_11001" data-code="[0x11001]"></span><span class="emoji emoji_11002" data-code="[0x11002]"></span><span class="emoji emoji_11003" data-code="[0x11003]"></span><span class="emoji emoji_11004" data-code="[0x11004]"></span><span class="emoji emoji_11005" data-code="[0x11005]"></span><span class="emoji emoji_11006" data-code="[0x11006]"></span><span class="emoji emoji_11007" data-code="[0x11007]"></span><span class="emoji emoji_11008" data-code="[0x11008]"></span><span class="emoji emoji_11009" data-code="[0x11009]"></span><span class="emoji emoji_11010" data-code="[0x11010]"></span><span class="emoji emoji_11011" data-code="[0x11011]"></span><span class="emoji emoji_11012" data-code="[0x11012]"></span><span class="emoji emoji_11013" data-code="[0x11013]"></span><span class="emoji emoji_11014" data-code="[0x11014]"></span><span class="emoji emoji_11015" data-code="[0x11015]"></span><span class="emoji emoji_11016" data-code="[0x11016]"></span><span class="emoji emoji_11017" data-code="[0x11017]"></span><span class="emoji emoji_11018" data-code="[0x11018]"></span><span class="emoji emoji_11019" data-code="[0x11019]"></span><span class="emoji emoji_11020" data-code="[0x11020]"></span><span class="emoji emoji_11021" data-code="[0x11021]"></span><span class="emoji emoji_11022" data-code="[0x11022]"></span><span class="emoji emoji_11023" data-code="[0x11023]"></span><span class="emoji emoji_11024" data-code="[0x11024]"></span><span class="emoji emoji_11025" data-code="[0x11025]"></span><span class="emoji emoji_11026" data-code="[0x11026]"></span><span class="emoji emoji_11027" data-code="[0x11027]"></span><span class="emoji emoji_11028" data-code="[0x11028]"></span><span class="emoji emoji_11029" data-code="[0x11029]"></span><span class="emoji emoji_11030" data-code="[0x11030]"></span><span class="emoji emoji_11031" data-code="[0x11031]"></span><span class="emoji emoji_11032" data-code="[0x11032]"></span><span class="emoji emoji_11033" data-code="[0x11033]"></span><span class="emoji emoji_11034" data-code="[0x11034]"></span><span class="emoji emoji_11035" data-code="[0x11035]"></span><span class="emoji emoji_11036" data-code="[0x11036]"></span><span class="emoji emoji_11037" data-code="[0x11037]"></span><span class="emoji emoji_11038" data-code="[0x11038]"></span><span class="emoji emoji_11039" data-code="[0x11039]"></span><span class="emoji emoji_11040" data-code="[0x11040]"></span><span class="emoji emoji_11041" data-code="[0x11041]"></span><span class="emoji emoji_11042" data-code="[0x11042]"></span><span class="emoji emoji_11043" data-code="[0x11043]"></span><span class="emoji emoji_11044" data-code="[0x11044]"></span><span class="emoji emoji_11045" data-code="[0x11045]"></span><span class="emoji emoji_11046" data-code="[0x11046]"></span><span class="emoji emoji_11047" data-code="[0x11047]"></span><span class="emoji emoji_11048" data-code="[0x11048]"></span><span class="emoji emoji_11049" data-code="[0x11049]"></span><span class="emoji emoji_11050" data-code="[0x11050]"></span><span class="emoji emoji_11051" data-code="[0x11051]"></span><span class="emoji emoji_11052" data-code="[0x11052]"></span><span class="emoji emoji_11053" data-code="[0x11053]"></span><span class="emoji emoji_11054" data-code="[0x11054]"></span><span class="emoji emoji_11055" data-code="[0x11055]"></span><span class="emoji emoji_11056" data-code="[0x11056]"></span><span class="emoji emoji_11057" data-code="[0x11057]"></span><span class="emoji emoji_11058" data-code="[0x11058]"></span><span class="emoji emoji_11059" data-code="[0x11059]"></span><span class="emoji emoji_11060" data-code="[0x11060]"></span><span class="emoji emoji_11061" data-code="[0x11061]"></span><span class="emoji emoji_11062" data-code="[0x11062]"></span><span class="emoji emoji_11063" data-code="[0x11063]"></span><span class="emoji emoji_11064" data-code="[0x11064]"></span><span class="emoji emoji_11065" data-code="[0x11065]"></span><span class="emoji emoji_11066" data-code="[0x11066]"></span><span class="emoji emoji_11067" data-code="[0x11067]"></span><span class="emoji emoji_11068" data-code="[0x11068]"></span><span class="emoji emoji_11069" data-code="[0x11069]"></span><span class="emoji emoji_11070" data-code="[0x11070]"></span><span class="emoji emoji_11071" data-code="[0x11071]"></span><span class="emoji emoji_11072" data-code="[0x11072]"></span><span class="emoji emoji_11073" data-code="[0x11073]"></span><span class="emoji emoji_11074" data-code="[0x11074]"></span><span class="emoji emoji_11075" data-code="[0x11075]"></span><span class="emoji emoji_11076" data-code="[0x11076]"></span><span class="emoji emoji_11077" data-code="[0x11077]"></span><span class="emoji emoji_11078" data-code="[0x11078]"></span><span class="emoji emoji_11079" data-code="[0x11079]"></span><span class="emoji emoji_11080" data-code="[0x11080]"></span><span class="emoji emoji_11081" data-code="[0x11081]"></span><span class="emoji emoji_11082" data-code="[0x11082]"></span><span class="emoji emoji_11083" data-code="[0x11083]"></span><span class="emoji emoji_11084" data-code="[0x11084]"></span><span class="emoji emoji_11085" data-code="[0x11085]"></span><span class="emoji emoji_11086" data-code="[0x11086]"></span><span class="emoji emoji_11087" data-code="[0x11087]"></span><span class="emoji emoji_11088" data-code="[0x11088]"></span><span class="emoji emoji_11089" data-code="[0x11089]"></span><span class="emoji emoji_11090" data-code="[0x11090]"></span><span class="emoji emoji_11091" data-code="[0x11091]"></span><span class="emoji emoji_11092" data-code="[0x11092]"></span><span class="emoji emoji_11093" data-code="[0x11093]"></span><span class="emoji emoji_11094" data-code="[0x11094]"></span><span class="emoji emoji_11095" data-code="[0x11095]"></span><span class="emoji emoji_11096" data-code="[0x11096]"></span><span class="emoji emoji_11097" data-code="[0x11097]"></span><span class="emoji emoji_11098" data-code="[0x11098]"></span><span class="emoji emoji_11099" data-code="[0x11099]"></span><span class="emoji emoji_11100" data-code="[0x11100]"></span><span class="emoji emoji_11101" data-code="[0x11101]"></span><span class="emoji emoji_11102" data-code="[0x11102]"></span><span class="emoji emoji_11103" data-code="[0x11103]"></span><span class="emoji emoji_11104" data-code="[0x11104]"></span>';

  //缁ф壙render
  extend(RenderChat, Render);

  function htmlEncode(text) {
    if (text.indexOf("<") > -1 || text.indexOf(">") > -1) {
      return text.replace(/</g, "&lt;").replace(/>/g, "&gt;");
    }
    return text;
  }

  /**
   * 弹框
   */
  function RenderChat(host,send, sendImage, chat) {
    this.model = {
      copyRight: "黑卡咨询管家",
      userName: "敢于冒险",
      userAsset: "/manner/images/logo2.png"
    };
        this.host = host;
    this.send = send || $.noop;
    this.sendImage = sendImage || $.noop;
    this.ctx = chat;
    this.token =
      "IxmVzoqgFkFvSQLqAaGkhNh_yrAmZQ1d6cMSMPL3:XM0iaYzRLaEGT38NoxBME786SsI=:eyJzY29wZSI6InVsdGltYXZpcC1hcHAiLCJyZXR1cm5Cb2R5Ijoie1wia2V5XCI6ICQoa2V5KSwgXCJoYXNoXCI6ICQoZXRhZyksIFwid2lkdGhcIjogJChpbWFnZUluZm8ud2lkdGgpLCBcImhlaWdodFwiOiAkKGltYWdlSW5mby5oZWlnaHQpfSIsImRlYWRsaW5lIjoxNTQyNjg0NDY4fQ==";
    
    var self = this;
    var URL = '';
    if (location.host.indexOf('ultimavip.cn')>=0) {
      URL = 'https://interface.ultimavip.cn/';
    } else {
      URL = 'http://testabc.ultimablack.cn/';
    }
    $.ajax({
            type: "POST",
            url: URL+"/anve/v1/qn/uptoken",
            data: {
                bucket: 'ultimavip-app'
            },
            success:function(res){
        if (res.success && res.data) {
          self.token = res.data;
        }
            }
        })

  }
  RenderChat.prototype.laodImage = function() {
    var that = this;
    var qiniuUrl = '';
    if (location.host.indexOf('ultimavip.cn')>=0) {
      qiniuUrl = 'https://up.qbox.me/';
    } else {
      qiniuUrl = 'http://upload.qiniu.com/';
    }
    
    var config = {
      domain: qiniuUrl,
      getToken: function(callback){
        callback(that.token);
      }
    };
    var callback = {
      onError: function(errorCode) {
        // console.log(errorCode);
      },
      onProgress: function(loaded, total) {
        var percent = Math.floor((loaded / total) * 100);

        that.renderItem("imageLoading", percent);
      },
      onCompleted: function(data) {
        if (!data.key) {
          alert(data.error);
        } else {
          that.renderItem(
            "rightImage",
            "https://img2.ultimavip.cn/" + data.key
          );
          that.sendImage({
            content: data.key,
            imageUri: data.key
          });
        }
      }
    };
    var imagupload = this.eleFooter.find("#uploadImg");
    imagupload.on("change", function(e) {
      var _file = e.target.files[0];
      if ( !/image\/\w+/.test(_file.type) ) {
        return alert('璇蜂笂浼犲浘鐗囷紒');
      }
      if (_file.size>10*1024*1024) {
        return alert('鍥剧墖涓嶈兘澶т簬10M');
      }
      UploadClient.initFile(config, function(uploadFile) {
        uploadFile.upload(_file, callback);
        document.getElementById("imgForm").reset();
      });
    });
  };

  RenderChat.prototype.render = function() {
    this.element = $(this.compile(CT, this.model));
    this.element.attr("id", "chat-pig" + +new Date());
    this.eleContent = this.element.find(".chat-list");
    this.eleFooter = this.element.find(".chat-footer");

    this.renderItem("sys", "如有需要, 请吩咐管家");

    // 鍒涘缓鍥剧墖涓婁紶
    this.laodImage();

    //this.renderItem('history');
    //this.renderItem('left', [{nickname:this.model.userName, msg:'鎮ㄥソ锛� 鏈変粈涔堝彲浠ュ府鎮ㄧ殑鍚楋紵'}]);

    //this.renderItem('right', '娌℃湁');
    //

    //缁戝畾input
    var that = this;
    var input = new InputTool(
      this.eleFooter.find("textarea").eq(0),
      this.eleFooter.find(".send-btn"),
      function(text) {
        that.renderItem("right", htmlEncode(text));
        that.send(text);
      }
    );

    this.eleContent.parent().on("scroll", function(e) {
      var evt = e || window.event;
      if (!!evt.stopPropagation) {
        evt.stopPropagation();
        return;
      }
      evt.cancelBubble = true;
    });

    /** 琛ㄦ儏绠＄悊 **/
    var faces = this.renderFace("images/faces", function() {
      input.element.val(input.element.val() + $(this).data("code"));
    });

    that.eleFooter.find(".chat-face").append(faces);
    that.eleFooter.on("click", ".chat-face a", function() {
      faces.toggle();
    });
    that.eleFooter.on("click", ".chat-face .emit-img", function() {
      $("#uploadImg").click();
    });

    var audio = $(this.renderAudio("https://img1.ultimavip.cn/voice.mp3"));
    this.element.append(audio);

    //
    if (!this.ctx.status) {
      this.element.css("bottom", "-500px");
    }
    //缁戝畾
    $("body")
      .append(this.element)
      .on("click", function(e) {
        if (
          !e.target.className ||
          e.target.className.indexOf("emit-face") === -1
        ) {
          faces.hide();
        }
      });

    this.triggerElement = $(".contact-link");
    this.triggerElement.on("click", function() {
      that.show();
      if (!$(this).data("open-id")) {
        $(this).data("open-id", Date.now());
        that.ctx.client.conn2Server();
      }

      //that.ctx.getMessage({data:Cookie.getItem(USERID)});
    });
    // this.element.before(this.triggerElement);
  };

  /**娓叉煋鍒癉OM
   * xuan
   * @param  {[type]} type [description]
   * @param  {[type]} data [description]
   * @return {[type]}      [description]
   */
  RenderChat.prototype.renderItem = function(type, data) {
    var htmls,
      result,
      that = this;
    if ($.isArray(data)) {
      htmls = [];
      $.each(data, function(i, v) {
        htmls.push(that.willRenderItem(type, v));
      });
      result = htmls.join("");
    } else {
      result = this.willRenderItem(type, data);
    }
    if (type === "left" || type === "right") {
      /** @type {瑙ｆ瀽琛ㄦ儏} [description] */
      var ht = result.match(/(\[0x\d+\])/g);
      if (!!ht && ht.length > 0) {
        $.each(ht, function(i, v) {
          //console.log(v);
          var d = v.match(/\d{2,}/);
          result = result.replace(
            v,
            '<img src="https://img2.ultimavip.cn/emoji_' +
              d +
              '.png?imageView2/2/w/32/h/32"/>'
          );
        });
      }
    }

    if (typeof result === "object") {
      return;
    }
    var dm = $(result);

    this.eleContent.append(dm);
    if (this.eleContent.height() > this.eleContent.parent().height()) {
      this.eleContent
        .parent()
        .scrollTop(
          this.eleContent.height() - this.eleContent.parent().height()
        );
    }
  };

  RenderChat.prototype.willRenderItem = function(type, data) {
    var html = "";
    switch (type) {
      case "history":
        html = this.renderHistory();
        break;
      case "time":
        html = this.reanderTime(data);
        break;
      case "left":
        html = this.renderLeft(data.nickname, data);
        break;
      case "right":
        html = this.renderRight(data);
        break;
      case "imageLoading":
        html = this.renderImageLoading(data);
        break;
      case "rightImage":
        html = this.renderRightImage(data);
        break;
      case "sys": {
        html = this.renderSystem(data);
      }
      default:
        break;
    }
    return html;
  };
  /**reak
   * 娓叉煋鐐瑰嚮鍘嗗彶璁板綍
   * @return {[type]} [description]
   */
  RenderChat.prototype.renderHistory = function() {
    var tpl =
      '<li class="history-message">' +
      '<p class="message-label"><a href="#">鐐瑰嚮鍔犺浇鍘嗗彶璁板綍</a></p>' +
      "</li>";
    return tpl;
  };

  RenderChat.prototype.renderSystem = function(text) {
    var elememt = $("#message-types");
    if (elememt.length > 0) {
      elememt.find("span").html(text);
      return elememt;
    }
    var tpl =
      '<li style="margin-top:10px" id="message-types"><p class="system-message"><span>{{text}}</span></p></li>';
    return this.compile(tpl, { text: text });
  };

  /**
   * 娓叉煋鏃堕棿
   * @param  {[type]} time [description]
   * @return {[type]}      [description]
   */
  RenderChat.prototype.reanderTime = function(time) {
    var tpl =
      '<li class="time-line">' +
      '<p  class="message-label">{{time}}</p>' +
      "</li>";
    return this.compile(tpl, { time: time });
  };

  /**
   * 娓叉煋绠″淇℃伅
   * @param  {[type]} userName [description]
   * @param  {[type]} text     [description]
   * @return {[type]}          [description]
   */
  RenderChat.prototype.renderLeft = function(userName, data) {
        if (data.type == 'ImageMessage') {
      var id = "img" + new Date().getTime();
            var tpl =
                '<li class="message-box box-left">' +
                '<div class="left-name">'+userName+'</div>' +
                '<div class="message-con">' +
                '<div class="message-text"><img id="' +
        id +
        '" src="' +
                'https://img2.ultimavip.cn/' + data.url +
                '"/></div>' +
                "</div>" +
                " </li>";
      // var dom = null;
      // var timerleft = setInterval(function() {
      //   dom = document.getElementById(id);
      //   if (dom) {
      //     clearInterval(timerleft);
      //     scroll.refresh();
      //     scrollTop();
      //     dom.onload = function() {
      //       scroll.refresh();
      //       scrollTop();
      //     };
      //   }
      // }, 50);
        return tpl;

        } else if (data.type == 'TextMessage') {
            var tpl =
                '<li class="message-box box-left">' +
                '<div class="left-name">{{userName}}</div>' +
                '<div class="message-con">' +
                '<div class="message-text">{{text}}</div>' +
                "</div>" +
                " </li>";
            return this.compile(tpl, { userName: userName, text: data.msg });
        }
    
  };

  RenderChat.prototype.renderRight = function(text) {
    var tpl =
      '<li class="message-box box-right">' +
      '<div class="message-con">' +
      '<div class="message-text">{{text}}</div>' +
      "</div>" +
      " </li>";
    return this.compile(tpl, { text: text });
  };
  RenderChat.prototype.renderRightImage = function(url) {
    var id = "img" + new Date().getTime();
    var tpl =
      '<li class="message-box box-right">' +
      '<div class="message-con">' +
      '<div class="message-text"><img id="' +
      id +
      '" src="' +
      url +
      '"/></div>' +
      "</div>" +
      " </li>";
    // var dom = null;
    // var timer = setInterval(function() {
    //   dom = document.getElementById(id);
    //   if (dom) {
    //     clearInterval(timer);
    //     scroll.refresh();
    //     scrollTop();
    //     dom.onload = function() {
    //       scroll.refresh();
    //       scrollTop();
    //     };
    //   }
    // }, 50);
    // return this.compile(tpl, { text: url });
    return tpl;
  };
  RenderChat.prototype.renderImageLoading = function(data) {
    $("#loading-bar").show();
    $("#loading-bar span").text(data);
    if (data == 100) {
      setTimeout(() => {
        $("#loading-bar").hide();
      }, 500);
    }
  };

  RenderChat.prototype.show = function() {
    this.element[0].style.bottom = "10px";
    this.triggerElement[0].style.bottom = "-43px";
  };

  RenderChat.prototype.hide = function() {
    this.element[0].style.bottom = "-500px";
    this.triggerElement[0].style.bottom = 0;
  };

  /**
   * 娓叉煋Audio
   *
   * @param  {[type]} src [description]
   * @return {[type]}     [description]
   */
  RenderChat.prototype.renderAudio = function(src) {
    var tpl =
      '<audio src="{{voice}}" type="audio/mpeg" id="play-audio" style="display:none"></audio>';
    if (!win.HTMLAudioElement) {
      tpl =
        '<embed id="play-audio" name="playaudio" src="{{voice}}" autostart="false" style="display:none" loop="false" ></embed>';
    }
    return this.compile(tpl, { voice: src });
  };

  /**
   * 娓叉煋
   * @param  {[type]} base [description]
   * @return {[type]}      [description]
   */
  RenderChat.prototype.renderFace = function(base, callback) {
    var $faceBox = $('<div class="face-box"></div>');
    $faceBox.append(FACE);
    $faceBox.on("click", "span", function(e) {
      callback.call(this);
      //$faceBox.hide();
    });
    return $faceBox;
  };

  /**
   * [InputTool description]
   * @param {[type]} ele [description]
   */
  function InputTool(ele, btnele, callback) {
    this.element = ele;
    this.btnele = btnele;
    this.callback = callback || $.noop;
    this.bindEvent();
  }

  InputTool.prototype = {
    constructor: InputTool,
    bindEvent: function() {
      var that = this;
      this.element.on("keydown", function(e) {
        var evt = e || window.event;
        if (evt.keyCode === 13 && that.returnValue(e)) {
          that.element.val("");
          that.element.focus();
        }
      });

      that.btnele.on("click", function(e) {
        if (that.returnValue(e)) {
          that.element.val("");
          that.element.focus();
        }
      });
    },

    returnValue: function(e) {
      var val = $.trim(this.element.val());
      var evt = e || window.event;
      if (!!evt.preventDefault) {
        evt.preventDefault();
      } else {
        evt.returnValue = false;
      }

      if (val === "") {
        return false;
      }
      this.callback.call(this, val);
      return true;
    }
  };

  var DG =
    '<div class="chat-dialog"><div class="zcDialog zcDialog-close" >\
        <div class="chat-modal">\
        <div class="zcDialog-body">\
        <p>结束本次对话</p>\
        <div class="iscloseDiv"><a  href="javascript: void (0);" class="surEndBtn">立即结束</a><a hidefocus="" href="javascript: void (0);" class="surCloseBtn"></a></div>\
        </div>\
        </div>\
        <div class="zcDialog-vertical"></div>\
        </div><div class="chat-mark" style="display: block;"></div></div>';

  function ChatDialog(ele, callback) {
    this.element = $(DG);
    this.parent = ele;
    this.okcallback = callback;
  }

  ChatDialog.prototype = {
    constructor: ChatDialog,
    show: function() {
      var self = this;
      this.element
        .on("click", ".zcDialog-close,.surCloseBtn", function() {
          self.hide();
        })
        .on("click", ".surEndBtn", function() {
          self.okcallback();
        });

      this.parent.append(this.element);
    },
    hide: function() {
      this.element.off();
      this.element.remove();
    }
  };

  var USERID = "userchat";
  $.ajaxSetup({
    timeout: 3000
  });
  /**
   * 鍏ュ彛
   */
  function ChatFast(host, status) {
    this.client = rcWebToolket();

    this.timer = null;
    this.sound = true;
    this.host = host;
    this.status = status;
  }

  ChatFast.prototype = {
    constructor: ChatFast,
    connect: function() {
      this.client.init();
      this.create();
      this.getMessage();
    },
    create: function() {
      var self = this;
      this.rt = new RenderChat(
                self.host,
        function(text) {
          self.client.sendText(text);
        },
        function(image) {
          self.client.sendImage(image);
        },
        this
      );

      this.addStyle();
      this.rt.render();

      if (this.status) {
        this.rt.show();
      } else {
        this.rt.hide();
      }

      this.bind();

      //鎺у埗闊抽
      this.audio = doc.getElementById("play-audio");
      //this.audio.SetTime(0);
      //鑾峰彇娑堟伅
      //
      //this.getMessage(uuid);
    },
    getMessage: function(uuid) {
      var self = this;
      this.client.setWatch(function() {
        self.audio.play();
        var extra = JSON.parse(this.content.extra);
        self.rt.renderItem("sys", extra.nickname + "涓烘偍鏈嶅姟");
                var data = {}
                if (this.content.messageName == "TextMessage") {
                    data = {
                        nickname: extra.nickname,
                        msg: this.content.content,
                        type: 'TextMessage'
                    }
                } else if (this.content.messageName == "ImageMessage") {
                    data = {
                        nickname: extra.nickname,
                        url: this.content.imageUri,
                        type: 'ImageMessage'
                    }
                }

        self.rt.renderItem("left", data);
      });
    },
    bind: function() {
      var self = this;
      this.rt.element
        .on("click", ".chat-voice", function() {
          self.sound = !self.sound;
          var pos = self.sound ? "0 -30px" : "-16px -30px";
          $(this).css("background-position", pos);
        })
        .on("click", ".chat-min", function() {
          self.rt.hide();
        })
        .on("click", ".chat-close", function() {
          self.distory();
        });
    },
    distory: function() {
      var self = this;
      var dialog = new ChatDialog(this.rt.element, function() {
        self.rt.hide();
        //self.rt.element.remove();
        //self.rt.triggerElement.remove();
      });
      dialog.show();
    },
    addStyle: function() {
      if ($("#chat-style").length > 0) {
        return;
      }
      if (win.all) {
        win.style = CSS;
        document.createStyleSheet("javascript:style");
      } else {
        var style = document.createElement("style");
        style.type = "text/css";
        style.innerHTML = CSS;

        document
          .getElementsByTagName("HEAD")
          .item(0)
          .appendChild(style);
      }

      $("style:last").attr("id", "chat-style");
    }
  };

  //  var chat = new ChatFast();
  // chat.connect();
  $.fn.chatFast = function(host, status) {
    this.each(function() {
      var chat = new ChatFast(host, status);
      chat.connect();
    });
    return this;
  };
})(document, window, jQuery);